<template>
  <div class="home">
      <el-row>
        <el-button v-if="$store.state.user.type ==0 "  @click="visible=true" >添加用户</el-button>
        <el-button v-if="$store.state.user.type ==0 "  @click="visible_type=true" >添加分类</el-button>
      </el-row>    
      <User v-if="$store.state.user.phone" ></User>  
      <div v-else class="change_user">
          <el-input v-model="phone"  placeholder="请填写手机号"></el-input>
          <el-input v-model="password" placeholder="请输入新密码"> </el-input>
          <el-upload
          
            class="upload-demo"
            action="http://182.92.156.134:8080/upload"
            :on-success="file_success"
            name="file"
            >
            <el-button size="small" type="primary">点击上传</el-button>
             <img  v-if="img" :src="img" alt="">
          </el-upload>

          <el-button @click="changeUser">修改信息</el-button>
      </div>

      <Table :userList="userList" :onDelList="delList">

        <el-table-column
          slot="date"
          label="头像"
          >
          <template slot-scope="scope">
            <div>
                <img width="40" height="40" :src="scope.row.img" alt="">
            </div>
          </template>
        </el-table-column>

      </Table>
     
      <el-pagination
      background
      layout="prev, pager, next"
      :page-size="limit"
      :current-page="page"
      @current-change="changePage"
      :total="Number(total)">
    </el-pagination>

      <!--定位--->
      <el-dialog
      title="添加用户"
      :visible.sync="visible"
      width="30%"
      >
      <AddUser :onChangeVisible="changeVisible" :onGetUserList="get_user_list"></AddUser> 
    </el-dialog>


     <el-dialog  title="添加学科"
      :visible.sync="visible_type"
      width="50%" >
        <ClassType :changeVisibleClass="changeVisibleClass"></ClassType> 
     </el-dialog>
  </div>
</template>

<script>

import AddUser  from "../components/AddUser"
import User from "../components/User"
import ClassType from "../components/ClassType"
import {mapState} from "vuex"
import {getUserList} from "@/api/user"
export default {
  data(){
    return {
       visible_type:false, //添加typoe
       page:1,
        limit:5,
       total:"",
       visible:false,
       phone:"",
       img:"",
       password:"",
       userList:[]
    }
  },
  name: 'Home',
  components:{
    AddUser,
    User,
    ClassType
  },
  computed:{
    ...mapState(["user"])
  },
  async mounted() {
    this.$store.dispatch("getUserInfo",this.user.user_id);
     this.get_user_list()
  },
  methods: {
    //changePage 修改page页面
    changePage(page){
      // console.log(page)
      this.page=page;
      this.get_user_list()
    },
    async get_user_list(){
        let res=  await getUserList(this.page,this.limit);
        this.total = res.total
        this.userList = res.data
    },
    delList(id){
       this.userList = this.userList.filter(item=>item.id!=id)
    },
    changeVisible(){
      this.visible=false
    },

      changeVisibleClass(){
      this.visible_type=false
    },
    file_success(res, file, fileList){
      this.img = res.url
    },
    changeUser(){
      this.$store.dispatch("editor",{
          password:this.password,
         id:this.$store.state.user.user_id,
         phone:this.phone,
         img:this.img}).then(res=>{
           alert("修改成功")
         })
    }
  },
}
</script>

<style>
  .el-row{
    padding:20px;
  }

  .change_user{
    padding:20px;
  }
  .change_user img{
    width:40px;
    height: 40px;
  }
</style>